<template>
  <div>
    <el-table :header-cell-style="headerCellStyle" :data="tableData" style="width: 100%" v-loading="loading" stripe
      highlight-current-row @sort-change="handleSortChange" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
        :sortable="column.sortable" :width="column.width" />
      <el-table-column v-if="actions && actions.length > 0" label="操作" width="180">
        <template #default="scope">
          <el-button v-for="action in actions" :key="action.label" :size="action.size" :type="action.type"
            @click="handleAction(scope.$index, scope.row, action)">
            {{ action.label }}
          </el-button>
        </template>
      </el-table-column>

      <template #empty>
        <b-no-data text="空空如也"></b-no-data>
      </template>
    </el-table>


    <!-- 分页 start -->
    <div class="pagination-box">
      <div class="total-text">
        共 {{ 60 }} 条
      </div>
      <el-config-provider :locale="zhCn">
        <el-pagination v-model:current-page="currentPage2" v-model:page-size="pageSize2" :page-sizes="[10, 20, 30, 40]"
          :disabled="disabled" :background="background" layout="sizes, prev, pager, next" :total="60"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-config-provider>
    </div>
    <!-- 分页 end -->
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, withDefaults } from 'vue';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import BNoData from './BNoData.vue';

// table头部样式
let headerCellStyle = {
  backgroundColor: 'rgb(240, 244, 250)',
  color: 'rgb(93, 104, 124)'
}

// 分页配置
const currentPage2 = ref(1)
const pageSize2 = ref(10)
const size = ref('default')
const disabled = ref(false)
const background = ref(true)

// 处理分页变化
const handleCurrentChange = (val: number) => {
  currentPage2.value = val;
};

const handleSizeChange = (val: number) => {
  pageSize2.value = val;
};

// 定义表格数据类型
interface TableData {
  [key: string]: any;
}

// 定义列配置类型
interface TableColumn {
  prop: string;
  label: string;
  sortable?: string;
  width?: string;
}

// 定义操作配置类型
interface Action {
  label: string;
  size?: string;
  type?: string;
}

// 定义 props
const props = withDefaults(defineProps<{
  tableData: TableData[];
  columns: TableColumn[];
  actions?: Action[];
  loading?: boolean;
}>(), {
  loading: false,
})

// 处理排序变化
const handleSortChange = ({ prop, order }: { prop: string; order: string }) => {
  console.log(`排序字段: ${prop}, 排序顺序: ${order}`);
  // 在这里可以根据排序字段和排序顺序进行数据排序
};

// 处理选择变化
const handleSelectionChange = (selection: TableData[]) => {
  console.log('选中的行:', selection);
};

// 处理操作按钮点击
const handleAction = (index: number, row: TableData, action: Action) => {
  console.log(`操作: ${action.label}, 第 ${index} 行:`, row);
  // 在这里处理操作逻辑
};
</script>

<style scoped>
/* 在这里可以添加自定义样式 */
.pagination-box {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  align-items: center;
}

.total-text {
  font-size: 14px;
  margin-right: 10px;
}
</style>
